<template>
<!-- 分类页面 -->
    <div class="fa classfy">
        <div class="fytop container">
        <img src="../assets/img/logo.gif" alt="">
        <div class="box">
            <div>
               <router-link to="/search" tag="input"
                    type="search"
                    class="inp1"
                    placeholder="输入菜名、食材、作者"
                    
                />
                <router-link to="/search" tag="input" type="submit" class="inp2 fa" value=""  />
            </div>
        </div>
    </div>

    <div class="f-fl" ref="left">
        <ul>
            <li v-for="(item,index) in lidata" :key="index" :class="{'con':nun==index?true:false}" :id="item.id" @click="selectItem(index)">
                <p>{{item.item}}</p>
            </li>
        </ul>
    </div>

    <div class="f-fr" ref="right">
        <ul>
            <li class="right_item">
                <div v-for="(item,index) in datalists" :key="index" @click="smalladd(item.title)" >
                    <img :src="item.img" alt="">
                    <p>{{item.title}}</p>
                </div>
            </li>
            <li class="right_item">
                <div v-for="(item,index) in datalists2" :key="index" >
                    <img :src="item.img" alt="">
                    <p>{{item.title}}</p>
                </div>
            </li>
            <li class="right_item">
                <div v-for="(item,index) in datalists" :key="index" >
                    <img :src="item.img" alt="">
                    <p>{{item.title}}</p>
                </div>
            </li>
        </ul>
    </div>
    
    <div class="bottom container">
        <ul>
            <li>
            <router-link tag="a" to="/home">
                <span id="bottom-home"></span>
                <p>首页</p>
            </router-link>
            </li>
            <li>
            <router-link tag="a" to="/init">
                <span id="bottom-top"></span>
                <p>排行</p>
            </router-link>
            </li>
            <li  class="con">
            <router-link tag="a" to="/classify">
                <span id="bottom-list"></span>
                <p>分类</p>
            </router-link>
            </li>
            <li>
                <router-link tag="a" to="/info"  >
                <span id="bottom-recipe"></span>
                <p>资讯</p>
                </router-link>
            </li>
            <li>
            <router-link tag="a" to="/my">
                <span id="bottom-user"></span>
                <p>我的</p>
            </router-link>
            </li>
        </ul>
    </div>
    </div>
</template>

<script>
import {getclassifydata} from "../api/home.js";
    export default {
        data() {
            return {
                datalists: null,
                datalists2: null,
                lidata:null,
                nun:0,
            };
        },
        created(){
            getclassifydata().then(data=>{
                this.datalists = data.data;
                this.datalists2 = data.data2;
                this.lidata = data.lidata;
                
            })
        },
        methods:{
            // 分类点击跳转
            selectItem(index){
                this.nun = index;
                this.$refs.right.style.top ="-"+ index*600 +"px"      
            },
            //跳转分类详情页面
            smalladd(item){
                console.log(item);
                    this.$router.push({ path:"/small", query: {item} })
            }
           
        },
        mounted(){
            window.scrollTo(0,0);
        },
    }
</script>

<style lang="scss" >
@import "../assets/css/fy.css";
@import "../assets/css/init.css";
.classfy{
    background-color: #fff;
}
</style>